<template>
  <div class="home-container">
    <!-- 1、顶部导航栏 -->
    <!--  -->
    <van-nav-bar fixed>
      <template #left>
        <div class="login"></div>
      </template>
      <template #right>
        <van-button
          icon="search"
          type="info"
          round
          class="search-btn"
          @click="$router.push({ path: '/search' })"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 2、标签栏 -->
    <van-tabs v-model="active" @click="onClick">
      <van-tab :title="items.name" v-for="items in channels" :key="items.id">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="(item, index) in list"
              :key="index"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <template #label>
                <van-grid :border="false" :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image lazy-load :src="img" />
                  </van-grid-item>
                </van-grid>
                <div class="infoS">
                  <span>{{ item.aut_name }}</span>
                  <span>{{ item.comm_count }}评论</span>
                  <span>{{ item.pubdate | showTime }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { channelsList, articleList } from "./home.js";
import moment from "moment";
//修改时间为中文
moment.locale("zh-cn");
export default {
  name: "home",
  data() {
    return {
      active: 0, //顶部导航栏切换
      list: [], //文章列表
      loading: false,
      finished: false,
      refreshing: false,
      channels: [], //频道列表
      timestamp: null, //获取当前时间戳
      //   lists: [],
    };
  },
  methods: {
    async onLoad() {
      //   setTimeout(() => {
      //     if (this.refreshing) {
      //       this.list = [];
      //       this.refreshing = false;
      //     }
      //     for (let i = 0; i <script 10; i++) {
      //       this.list.push(this.list.length + 1);
      //     }
      //     this.loading = false;
      //     if (this.list.length >= 40) {
      //       this.finished = true;
      //     }
      //   }, 1000);
      //   let res = articleList({
      //     channel_id: this.channels[this.active].id,
      //     timestamp: this.timestamp,
      //   });

      //如果没有时间戳获取当前时间戳
      if (!this.timestamp) {
        this.timestamp = Date.now();
      }
      let res = await articleList({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp,
      });
      this.list.push(...res.data.data.results);
      console.log(res);
      //   console.log(this.list);

      //存储当前请求的时间戳，用户下一次的请求。
      this.timestamp = res.data.data.pre_timestamp;

      //2、修改loding为false,本次加载结束
      this.loading = false;

      //   3、加载超过100.就不在触底
      if (this.list.length >= 100) {
        this.finished = true;
      }
    },
    onRefresh() {
      //0.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)

      // 清空列表数据
      this.finished = false;
      //2、下拉刷新清除时间戳
      this.timestamp = null;
      this.list = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
      //4.关闭上拉刷新动画（如果不写，上面的上拉刷新动画会一直转圈）
      this.refreshing = false;
    },
    onClick() {
      //清除列表数据
      this.list = [];
      //2、下拉刷新清除时间戳
      this.timestamp = null;
      //2.设置loading状态true,开始加载
      this.loading = true;
      this.onLoad();
    },
  },
  async created() {
    let res = await channelsList();
    console.log(res);
    this.channels = res.data.data.channels;
  },
  filters: {
    showTime(value) {
      return moment(value).fromNow();
    },
  },
};
</script>

<style lang='less'>
body {
  overflow: hidden;
}
.home-container {
  // 1vh = 屏幕高度1/100
  height: 100vh;
  box-sizing: border-box;
  padding-top: 46px;
  padding-bottom: 50px;
  .login {
    width: 100px;
    height: 35px;
    background: url("~@/assets/logo.png") no-repeat;
    background-size: cover;
  }
  // 搜索按钮
  .search-btn {
    background-color: #5babfb;
    width: 100px;
    height: 35px;
    font-size: 14px;
    border: none;
    .van-icon {
      color: #fff;
    }
    .van-button__text {
      color: #fff;
    }
  }
  .van-tabs {
    box-sizing: border-box;
    padding-top: 46px;
    height: 100%;
    .van-tabs__wrap {
      width: 100%;
      height: 44px;
      position: fixed;
      top: 46px;
      z-index: 10;
    }
    .van-tabs__content {
      //   height: 527px;
      //   padding-top: 44px;
      height: 100%;
      overflow-y: auto;
      //   padding-bottom: 50px;
      .infoS {
        span {
          padding-right: 10px;
        }
      }
    }
  }
}
</style>